<template>
  <view class="tabbar flex-row justify-between items-center section_8 mt-42">
    <!-- <view class="flex-col items-center"  @click="navigateTo('receivingOrdersSetting')">
      <view class="iconfont xlmicon-shezhi font_shezhi" :class="[props.current === 0 ? 'active' : '']"></view>
      <text :class="['font_5 mt-5', props.current === 0 ? 'text_12' : '']">首页</text>
    </view>
    <view class="flex-col items-center" @click="navigateTo('myOrders')">
      <view class="iconfont xlmicon-dingdan font_dingdan" :class="[props.current === 2 ? 'active' : '']"></view>
      <text :class="['font_5 mt-6', props.current === 2 ? 'text_12' : '']">成绩</text>
    </view> -->
    <view v-for="(tab, idx) in tabs" :key="tab.page" class="flex-col items-center" @click="navigateTo(tab.page)">
      <view class="iconfont" :class="[ props.current === tab.currentIndex ? 'active' : '']">
        <image :src="props.current === tab.currentIndex ? tab.activeIcon : tab.icon" class="icon" />
      </view>
      <text :class="['font_5 mt-5', props.current === tab.currentIndex ? 'text_12' : 'text_normal']">{{ tab.label }}</text>
    </view>
  </view>
</template>

<script setup>
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  const tabs = [
    {
      icon: imgUrl + 'homeIcon-normal@2x.png',
      activeIcon: imgUrl + 'homeIcon-active@2x.png',
      label: '首页',
      page: 'home',
      currentIndex: 0,
      type: 'home'
    },
    //暂时隐藏此菜单
    {
      icon: imgUrl + 'recordIcon-normal@2x.png',
      activeIcon: imgUrl + 'recordIcon-active@2x.png',
      label: '记录',
      page: 'record',
      currentIndex: 1,
      type: 'record'
    },
    {
      icon: imgUrl + 'scoreIcon-normal@2x.png',
      activeIcon: imgUrl + 'scoreIcon-active@2x.png',
      label: '成绩',
      page: 'score',
      currentIndex: 2,
      type: 'score'
    },
    {
      icon: imgUrl + 'album-normal@2x.png',
      activeIcon: imgUrl + 'album-active@2x.png',
      label: '相册',
      page: 'album',
      currentIndex: 3,
      type: 'album'
    },
    {
      icon: imgUrl + 'mineIcon-normal@2x.png',
      activeIcon: imgUrl + 'mineIcon-active@2x.png',
      label: '我的',
      page: 'mine',
      currentIndex: 4,
      type: 'mine'
    }
    // 如有更多 tab，继续添加
  ];

  const props = defineProps({
    current: {
      type: Number,
      default: 0
    }
  })

  // 小程序获取当前页面路径
  const currentPath = getCurrentPages()[getCurrentPages().length - 1].route;
  onShow(() => {
    console.log('currentPath', currentPath);
  })
  const navigateTo = (page) => {
    // 小程序获取当前页面路由
    const pages = getCurrentPages(); // 获取当前页面栈
    const currentPage = pages[pages.length - 1]; // 获取当前页面
    const currentPath = currentPage.route; // 获取当前页面的路径
    console.log('currentPath>>>', currentPath);
    console.log('页面栈数量:', pages.length);

    // 检查页面栈是否接近限制
    if (pages.length >= 9) {
      console.warn('页面栈接近限制，将使用reLaunch');
    }

    switch (page) {
      case 'home':
        if (currentPath !== 'pages/leagueMatchesHome/index') {
          // 使用reLaunch跳转到首页，清空页面栈
          uni.reLaunch({
            url: '/pages/leagueMatchesHome/index',
            success: () => {
              console.log('reLaunch to home success');
            },
            fail: (err) => {
              console.error('reLaunch to home failed:', err);
            }
          })
        }
        break
      case 'record':
        if (currentPath !== 'pages/RecordRanking/index') {
          // 使用reLaunch跳转到记录页面，清空页面栈，消除滑动动画
          uni.reLaunch({
            url: '/pages/RecordRanking/index',
            success: () => {
              console.log('reLaunch to record success');
            },
            fail: (err) => {
              console.error('reLaunch to record failed:', err);
            }
          })
        }
        break
      case 'score':
        if (currentPath !== 'pages/ScorePage/index') {
          // 使用reLaunch跳转到成绩页面，清空页面栈，消除滑动动画
          uni.reLaunch({
            url: '/pages/ScorePage/index',
            success: () => {
              console.log('reLaunch to score success');
            },
            fail: (err) => {
              console.error('reLaunch to score failed:', err);
            }
          })
        }
        break
      case 'album':
        // 跳转到H5相册页面
        const albumUrl = 'https://www.yipai360.com/photoliveh5/home/?orderId=202508142300216456&channel=h5';
        
        // #ifdef APP-PLUS
        // APP端使用系统浏览器打开
        plus.runtime.openURL(albumUrl);
        // #endif
        
        // #ifdef H5
        // H5端新窗口打开
        window.open(albumUrl, '_blank');
        // #endif
        
        // #ifdef MP-WEIXIN
        // 微信小程序提示用户复制链接
        uni.showModal({
          title: '提示',
          content: '相册功能需要跳转到外部链接，请复制链接到浏览器打开',
          confirmText: '复制链接',
          success: (res) => {
            if (res.confirm) {
              uni.setClipboardData({
                data: albumUrl,
                success: () => {
                  uni.showToast({
                    title: '链接已复制',
                    icon: 'success'
                  });
                }
              });
            }
          }
        });
        // #endif
        
        console.log('跳转到相册H5页面:', albumUrl);
        break
      case 'mine':
        if (currentPath !== 'pages/mine/index') {
          // 使用reLaunch跳转到我的页面，清空页面栈
          uni.reLaunch({
            url: '/pages/mine/index',
            success: () => {
              console.log('reLaunch to mine success');
            },
            fail: (err) => {
              console.error('reLaunch to mine failed:', err);
            }
          })
        }
        break
    }
  };
</script>

<style scoped lang="scss">
  .tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 180rpx;
    background-color: #ffffff;
    /* border-top: 1px solid #e0e0e0; */
  }

  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20rpx 0;
  }

  .tab.active {
    color: #ea602d;
    /* 选中状态颜色 */
  }

  .icon {
    width: 50rpx;
    height: 50rpx;
    /* margin-bottom: 18rpx; */
  }

  .section_8 {
    padding: 52rpx 18rpx 52rpx;
    background-color: #ffffff;
    box-shadow: 0rpx -2rpx 28rpx 0rpx #0000000a;

    .image_9 {
      width: 48rpx;
      height: 48rpx;
    }

    .text_12 {
      color: #ea602d;
      font-weight: 500;
    }

    .text_normal {
      color: #425060;
    }

    .section_9 {
      padding: 16rpx 26rpx 14rpx 28rpx;
      background-image: linear-gradient(180deg, #ea602e 0%, #ff9871 100%);
      border-radius: 32rpx;
      height: 64rpx;

      .image_11 {
        width: 24rpx;
        height: 28rpx;
      }
    }

    .image_10 {
      width: 39rpx;
      height: 43rpx;
    }

    .text_11 {
      color: #425060;
    }

    .font_55 {
      color: #ffffff !important;
    }

    .font_shezhi {
      font-size: 54rpx;

      &.active {
        color: #ea602d !important;
      }
    }

    .font_dingdan {
      font-size: 48rpx;

      &.active {
        color: #ea602d !important;
      }
    }
  }
</style>